<template>
    <el-form :model="form" label-width="100px" class="form-container">
      <!-- 基础信息 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">基础信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商编号">
              <el-input v-model="form.customerNo" style="width: 220px;" disabled />
              <el-checkbox v-model="form.isSystemNo" @change="handleSystemNoChange" style="margin-left: 10px;" disabled>系统编号</el-checkbox>
            </el-form-item>
            <el-form-item label="公司名称">
              <el-input v-model="form.companyName" disabled />
            </el-form-item>
      
            <el-form-item label="供应商类别">
              <el-select v-model="form.customerType" placeholder="请选择客户类别" disabled>
                <el-option v-for="item in customerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="人员规模">
              <el-select v-model="form.staffSize" placeholder="请选择人员规模" disabled>
                <el-option v-for="item in staffSizeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="公司性质">
              <el-select v-model="form.companyNature" placeholder="请选择公司性质" disabled>
                <el-option v-for="item in companyNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="注册地址">
              <el-input v-model="form.registeredLocation" style="width: 220px;" disabled />
              <el-button icon="el-icon-location" @click="showMapDialog = true" style="margin-left: 10px;" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商全称">
              <el-input v-model="form.customerFullName" disabled />
            </el-form-item>
            <el-form-item label="营业性质">
              <el-select v-model="form.businessNature" placeholder="请选择营业性质" disabled>
                <el-option v-for="item in businessNatureOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="供应商等级">
              <el-select v-model="form.customerLevel" placeholder="请选择客户等级" disabled>
                <el-option v-for="item in customerLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属行业">
              <el-select v-model="form.industry" placeholder="请选择所属行业" disabled>
                <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="注册资本">
              <el-select v-model="form.registeredCapital" placeholder="请选择注册资本" disabled>
                <el-option v-for="item in registeredCapitalOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="所在地区">
              <el-cascader
                v-model="form.region"
                :options="regionOptions"
                :props="regionProps"
                placeholder="请选择省市区"
                clearable
                disabled
              />
            </el-form-item>
            <el-form-item label="统一信用代码">
              <el-input v-model="form.creditCode" disabled />
            </el-form-item>
            <el-form-item label="状态">
              <el-checkbox v-model="form.status" disabled>启用</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" class="full-width">
          <el-input v-model="form.remark" type="textarea" disabled />
        </el-form-item>
      </el-card>
  
      <!-- 联系方式 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">联系方式</div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="法人代表">
              <el-input v-model="form.legalPerson" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司电话">
              <el-input v-model="form.companyPhone" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人">
              <el-input v-model="form.contactPerson" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input v-model="form.contactPhone" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="部门">
              <el-input v-model="form.department" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位">
              <el-input v-model="form.position" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="微信">
              <el-input v-model="form.wechat" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input v-model="form.email" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="联系地址" class="full-width">
          <el-input v-model="form.contactAddress" disabled />
        </el-form-item>
      </el-card>
  
      <!-- 业务情况 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">业务情况</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户经理">
              <el-input v-model="form.accountManager" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在部门">
              <el-input v-model="form.departmentInCharge" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="业务说明" class="full-width">
          <el-input v-model="form.businessDescription" type="textarea" disabled />
        </el-form-item>
      </el-card>
  
      <!-- 财务信息 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">财务信息</div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="开户银行">
              <el-input v-model="form.bank" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账户名称">
              <el-input v-model="form.accountName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账号">
              <el-input v-model="form.bankAccount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="纳税人识别号">
              <el-input v-model="form.taxId" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="网银账号">
              <el-input v-model="form.onlineBankAccount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="税率">
              <el-input v-model="form.taxRate" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 交货地址 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">交货地址</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交货地址">
              <el-input v-model="form.deliveryAddress" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input v-model="form.deliveryDetailAddress" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 附件 -->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="card-header">附件</div>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">点击上传 / 拖拽到此区域</div>
        </el-upload>
      </el-card>
  
      <!-- 按钮 -->
      <div class="form-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="AddGongyingshang()">确定</el-button>
      </div>
    </el-form>
    <!-- 地图弹窗 -->
    <el-dialog v-model="showMapDialog" title="设置地点" width="700px" :close-on-click-modal="false">
      <div style="height: 300px;">
        <div id="mapContainer" style="width:100%;height:100%;"></div>
      </div>
      <el-form>
        <el-form-item label="位置名称">
          <el-input v-model="form.registeredLocation" disabled />
        </el-form-item>
        <el-form-item label="详细位置">
          <el-input v-model="form.registeredLocationDetail" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showMapDialog = false">取消</el-button>
        <el-button type="primary" @click="querentankuang()">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, watch, nextTick ,reactive,onMounted} from 'vue'
  import { regionData } from 'element-china-area-data'
  import {KongaUrl} from '@/axios/axiosHelp'
  import axios from 'axios'
  import {ElMessage} from 'element-plus'
  import {useRouter,useRoute} from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const form = reactive({
    id:route.query.id,
    customerNo: route.query.customerNo,
    isSystemNo: route.query.isSystemNo,
    companyName: route.query.companyName,
    customerType: route.query.customerType,
    staffSize: route.query.staffSize,
    companyNature: route.query.companyNature,
    registeredAddress: route.query.registeredAddress,
    registeredLocation: route.query.registeredLocation,
    registeredLocationDetail: route.query.registeredLocationDetail,
    customerFullName: route.query.customerFullName,
    businessNature: route.query.businessNature,
    customerLevel: route.query.customerLevel,
    industry: route.query.industry,
    registeredCapital: route.query.registeredCapital,
    region: route.query.region,
    creditCode: route.query.creditCode,
    status: route.query.status,
    remark: route.query.remark,
    legalPerson: route.query.legalPerson,
    companyPhone: route.query.companyPhone,
    contactPerson: route.query.contactPerson,
    contactPhone: route.query.contactPhone,
    department: route.query.department,
    position: route.query.position,
    wechat: route.query.wechat,
    email: route.query.email,
    contactAddress: route.query.contactAddress,
    accountManager: route.query.accountManager,
    departmentInCharge: route.query.departmentInCharge,
    businessDescription: route.query.businessDescription,
    bank: route.query.bank,
    accountName: route.query.accountName,
    bankAccount: route.query.bankAccount,
    taxId: route.query.taxId,
    onlineBankAccount: route.query.onlineBankAccount,
    taxRate: route.query.taxRate,
    deliveryAddress: route.query.deliveryAddress,
    deliveryDetailAddress: route.query.deliveryDetailAddress
  })
  
  const showMapDialog = ref(false)
  const fileList = ref([])
  
  // 下拉选项数据
  const businessNatureOptions = [
    { label: '国有企业', value: '国有企业' },
    { label: '民营企业', value: '民营企业' },
    { label: '外资企业', value: '外资企业' },
    { label: '合资企业', value: '合资企业' }
  ]
  const customerLevelOptions = [
    { label: 'A级', value: 'A' },
    { label: 'B级', value: 'B' },
    { label: 'C级', value: 'C' }
  ]
  const industryOptions = [
    { label: '制造业', value: '制造业' },
    { label: '服务业', value: '服务业' },
    { label: '零售业', value: '零售业' },
    { label: '建筑业', value: '建筑业' }
  ]
  const customerTypeOptions = [
    { label: '普通客户', value: '普通客户' },
    { label: 'VIP客户', value: 'VIP客户' }
  ]
  const registeredCapitalOptions = [
    { label: '100万以下', value: '100万以下' },
    { label: '100-500万', value: '100-500万' },
    { label: '500-1000万', value: '500-1000万' },
    { label: '1000万以上', value: '1000万以上' }
  ]
  const staffSizeOptions = [
    { label: '50人以下', value: '50人以下' },
    { label: '50-200人', value: '50-200人' },
    { label: '200-500人', value: '200-500人' },
    { label: '500人以上', value: '500人以上' }
  ]
  const companyNatureOptions = [
    { label: '有限责任公司', value: '有限责任公司' },
    { label: '股份有限公司', value: '股份有限公司' },
    { label: '个体工商户', value: '个体工商户' }
  ]
  onMounted(()=>{
    console.log('供应商详情',route.query)
  })

  // 省市区数据
  const regionOptions = regionData
  const regionProps = {
    value: 'label',
    label: 'label',
    children: 'children',
    emitPath: true // 这样v-model为['广东省','广州市','天河区']
  }
  
  function generateRandomNo() {
    return 'DYSBH' + Date.now() + Math.floor(Math.random() * 1000)
  }
  function handleSystemNoChange(val) {
    if (val) {
      form.customerNo = generateRandomNo()
    } else {
      form.customerNo = ''
    }
  }
  
  // 地图相关
  let map = null
  let marker = null
  
  watch(showMapDialog, (val) => {
    if (val) {
      nextTick(() => {
        if (!window.AMap) {
          alert('请先在public/index.html中引入高德地图JS API')
          return
        }
        if (!map) {
          map = new window.AMap.Map('mapContainer', {
            resizeEnable: true,
            zoom: 15
          })
        }
        // 定位
        window.AMap.plugin('AMap.Geolocation', function () {
          var geolocation = new window.AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
          })
          map.addControl(geolocation)
          geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
              map.setCenter(result.position)
              if (!marker) {
                marker = new window.AMap.Marker({
                  position: result.position,
                  map: map
                })
              } else {
                marker.setPosition(result.position)
              }
              // 逆地理编码获取地址
              window.AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new window.AMap.Geocoder()
                geocoder.getAddress(result.position, function (status, res) {
                  if (status === 'complete' && res.regeocode) {
                    form.value.registeredLocation = res.regeocode.formattedAddress
                    // 可以将更详细的地址信息赋值给 form.value.registeredLocationDetail
                  }
                })
              })
            }
          })
        })
      })
    }
  })
  const querentankuang = () => {x
    showMapDialog.value = false
  }
  
  const AddGongyingshang = () => {
    const regionStr = Array.isArray(form.region) ? form.region.join('') : '';
    const postData = { ...form, region: regionStr };
    axios({
      url: 'http://localhost:5028/api/Outsour/AddCustomer',
      method: 'post',
      data: postData
    })
    .then(res => {
      if (res.data.code == 101) {
        ElMessage.success('添加成功');
        router.push('/GongyingshangView');
      }
    })
  }
  
  function handlePreview(file) {
    // 预览附件
  }
  function handleRemove(file, fileList) {
    // 删除附件
  }
  function handleClose() {
    // 关闭表单
  }
  function handleSubmit() {
    // 提交表单
  }
  </script>
  
  <style scoped>
  .form-container {
    padding: 20px;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .card-header {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 10px; /* 调整header的padding */
    border-bottom: 1px solid #ebeef5; /* 给header添加下边框 */
    margin-bottom: 20px; /* 调整header和内容的间距 */
  }
  .full-width {
    width: 100%;
  }
  .form-footer {
    text-align: right;
    margin-top: 20px;
  }
  </style>